<template>
  <div class="login-container">
    <!-- 背景纹理图片 -->
    <img src="../assets/background/background02.jpeg" alt="背景纹理" class="background-image" />
    <!-- 包裹内容的主框 -->
    <div class="login-wrapper">
      <!-- 左侧图片部分 -->
      <div class="login-image-container">
        <img src="../assets/newLogin.webp" alt="Login Illustration" class="login-image" />
      </div>

      <!-- 右侧登录表单部分 -->
      <div class="login-form-container">
        <div class="login-form-card fade-in-animation">
          <h2 class="form-title">登录账号</h2>
          <el-form ref="userForm" :model="userForm" :rules="rules" class="login-form" autocomplete="off">
            <!-- 用户名 -->
            <el-form-item prop="userName">
              <el-input
                  v-model="userForm.userName"
                  placeholder="请输入账号/邮箱/手机号"
                  prefix-icon="el-icon-user"
                  autocomplete="new-password"
              />
            </el-form-item>

            <!-- 密码 -->
            <el-form-item prop="password" autocomplete="off">
              <div class="password-input-wrapper">
              <el-input
                  v-model="userForm.password"
                  :type="passwordVisible ? 'text' : 'password'"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  @suffix-click="togglePasswordVisibility"
                  suffix-icon="passwordVisible ? 'el-icon-view' : 'el-icon-view-off'"
                  autocomplete="new-password"
              />
                <button
                    type="button"
                    class="toggle-password-button"
                    @click="togglePasswordVisibility"
                >
                  <i :class="passwordVisible ? 'el-icon-view' : 'el-icon-view-off'"></i>
                </button>
              </div>
            </el-form-item>

            <!-- 登录按钮 -->
            <el-form-item>
              <el-button type="primary" block class="login-button" @click.prevent="login('userForm')">
                登录
              </el-button>
            </el-form-item>

            <!-- 找回密码和注册 -->
            <div class="form-links">
              <router-link to="/forgotPassword">忘记密码？</router-link>
              <router-link to="/register" class="register-link">立即注册</router-link>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "LoginView",
  data() {
    return {
      userForm: {
        userName: "",
        password: "",
      },
      rules: {
        userName: [
          { required: true, message: "账号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 3, message: "密码至少为3个字符", trigger: "blur"},
        ],
      },
      passwordVisible: false
    };
  },

  methods: {
    togglePasswordVisibility() {
      this.passwordVisible = !this.passwordVisible;
    },
    login() {
      console.log("login");
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          if (this.userForm.userName.trim() !== "" && this.userForm.password.trim() !== "") {
            // 发送登录请求
            axios.post('http://localhost:8095/user/login', this.userForm)
                .then((response) => {
                  console.log("rep", response);
                  if (response.data.code === 200) {  // 根据ResponseResult中的code判断成功
                    console.log("code", response.data.code);
                    // 登录成功，生成JWT令牌
                    localStorage.setItem('token', response.data.data.token);
                    // 存储用户类型
                    localStorage.setItem('userType', response.data.data.userType);
                    localStorage.setItem('userName', this.userForm.userName);
                    // 跳转到系统页
                    if(response.data.data.userType === '1'){this.$router.push({ path: '/ManagerHead/ProjectList/ProjectDoing'  });}
                    else if(response.data.data.userType === '2'){this.$router.push({  path: '/MemberHead/MemberProjectList/ProjectDoing'  });}
                    else {this.$router.push({path:'/CheckerHead/CheckerProjectList/CheckerDoing'});}
                  } else {
                    this.$message.error("登录失败，用户名不存在或者密码错误");
                  }
                })
                .catch((error) => {
                  console.log(error);
                });
          }
        } else {
          this.$message.error("请填写完整的用户名和密码！");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
/* 主容器 */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding:0 20px;
}

/* 背景纹理图片 */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* 让图片位于所有内容的下面 */
  opacity: 0.95; /* 透明度调整 */
}

/* 包裹左右内容的主框 */
.login-wrapper {
  display: flex;
  background: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
  border-radius: 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* 提升层次感 */
  padding: 30px;
  gap: 0px; /* 缩小左右间距 */
  width: 90%; /* 限制最大宽度 */
  max-width: 900px;
}

/* 左侧图片容器 */
.login-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0; /* 减少图片与表单间距 */
}

/* 图片样式 */
.login-image {
  width: 100%;
  max-width: 400px; /* 缩小图片宽度 */
  height: auto;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 右侧登录表单容器 */
.login-form-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 登录表单卡片 */
.login-form-card {
  background: white;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 40px 30px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

/* 淡入动画效果 */
.fade-in-animation {
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 表单标题 */
h2.form-title {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

/* 输入框样式 */
.el-input {
  font-size: 16px;
  border-radius: 8px;
  transition: border-color 0.3s;
}

.el-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* 登录按钮 */
.login-button {
  width: 100%; /* 按钮宽度与表单对齐 */
  border-radius: 8px;
  background-color: #007bff;
  height: 40px; /* 调整按钮高度 */
  font-size: 16px;
  transition: background-color 0.3s, transform 0.2s;
}

.login-button:hover {
  background-color: #0056b3;
  transform: scale(1.02); /* 缩放效果 */
}

/* 链接样式 */
.form-links {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.form-links a {
  font-size: 14px;
  color: #007bff;
  text-decoration: none;
}

.form-links a:hover {
  text-decoration: underline;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .login-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  .login-image,
  .login-form-card {
    width: 90%;
  }
}

/* 密码输入框容器 */
.password-input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

.toggle-password-button {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #888;
}

.toggle-password-button:hover {
  color: #555;
}
</style>
